<template>
  <div class="api-info">
    <div class="api-info-params">
      <h2 id="GetList" class="title">{{ title }}</h2>
      <div class="url">
        <span class="method" :class="{get: method.toLowerCase() === 'get'}">{{ method }}</span>
        <span>{{ url | urlFormat }}</span>
      </div>
      <div class="req-res">请求 Request</div>
      <div>
        <h3 class="title">{{ method.toLowerCase() === "get" ? 'QUERY' : 'BODY' }}</h3>
        <ul class="param-ul">
          <li class="param-li" v-for="field in fields" :key="field.name">
            <div class="param-field">
              <span class="param-field-name">{{ field.name }}</span>
              <span class="param-field-type">{{ field.type }}</span>
              <span class="param-field-required" v-if="field.isRequired">必填</span>
            </div>
            <div class="param-field-desc">
              <div class="param-field-desc-in">
                <p>{{ field.desc }}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="api-info-code">
      <api-code
        :url="url"
        :method="method"
        :fields="fields"
        />
    </div>
  </div>
</template>

<script>
import ApiCode from './ApiCode'
export default {
  name: 'ApiInfo',
  components: { ApiCode },
  props: {
    method: {
      type: String,
      default: () => 'get'
    },
    title: {
      type: String,
      required: true
    },
    url: {
      type: String,
      required: true
    },
    fields: {
      type: Array,
      default: () => [
        {
          name: 'name',
          type: 'int',
          isRequired: true,
          desc: '名称'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../worksheet-api";
</style>
